<template>
  <div>
    <el-form
      ref="baseForm"
      class="base-form"
      :model="baseForm"
      :rules="rules"
      auto-complete="on"
    >
      <el-table :data="baseForm.tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column label="姓名" width="180">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.name'"
              :rules="rules.name"
              class="all"
            >
              <el-input
                v-model="scope.row.name"
                placeholder="请输入"
                clearable
                @focus="
                  $refs.baseForm.clearValidate(`tableData.${scope.$index}.name`)
                "
              />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="地址">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.address'"
              :rules="rules.address"
              class="all"
            >
              <el-input
                v-model="scope.row.address"
                placeholder="请输入"
                clearable
                @focus="
                  $refs.baseForm.clearValidate(
                    `tableData.${scope.$index}.address`
                  )
                "
              />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-button type="primary" @click="handleSubmit">
      提交
    </el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rules: {
        name: [{ required: true, message: '请输入name', trigger: 'blur' }],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ]
      },
      baseForm: {
        tableData: [
          {
            date: '2016-05-02',
            name: '',
            address: ''
          },
          {
            date: '2016-05-02',
            name: '',
            address: ''
          },
          {
            date: '2016-05-02',
            name: '',
            address: ''
          }
        ]
      }
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.baseForm.validate((vaild) => {
        console.log(vaild);
      });
    }
  }
};
</script>
